<template>
  <div class="home-index-container">
    <div class="home-index-top">
      <h4>统计首页</h4>
    </div>
    <div class="count">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-red">
            <p>员工数量</p>
             <span>{{count.member}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-green">
            <p>客户数量</p>
            <span>{{count.customer}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-yellow">
            <p>经纪人数量</p>
            <span>{{count.agent}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-light">
            <p>今日新增客户</p>
            <span>{{count.customer}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-blue">
            <p>今日新增经纪人</p>
            <span>{{count.agentToday}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="home-index-content">
       <h4>项目成交金额报表</h4>
      <div class="select">
        <el-row>
          <el-col :span="6">
            <div class="grid-content ">
              楼盘：
              <el-select v-model="allHousesId" placeholder="请选择" @change="getHouseSalesByTimTime">
                <el-option
                  v-for="item in allHouses"
                  :key="item.id"
                  :label="item.houseName"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              时间：
              <el-date-picker
                v-model="dateValue"
                type="month"
                value-format="yyyy-MM"
                @change="getHouseSalesByTimTime"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content "></div>
          </el-col>
        </el-row>
      </div>
      <div class="echarts-box">
        <div class="echarts" id="echartsId" style="width: 600px;height:400px;" ref="myEchart"></div>
      </div>
    </div>

  </div>
</template>

<script>
import apiDataFilter from "../../../utils/apiDataFilter";
import echarts from 'echarts'
export default {
  name: 'index',
  data () {
    return {
      count:{},
      chart:null,
      allHouses:[],
      allHousesId:'',
      dateValue:'',
      chartData:[],
      dateList:[],
      seriesData:[],
    }
  },
  mounted() {
    this.handleGetDay();
  },
  methods:{
    getCount(){
      apiDataFilter.request({
        apiPath:'common.count',
        successCallback:(res)=>{
          this.count = res.data;
        }
      })
    },
    /*获取所有楼盘*/
    getAllHouses(){
      apiDataFilter.request({
        apiPath:'house.getAllHouses',
        successCallback:(res)=>{
          this.allHouses = res.data;
          this.allHousesId = this.allHouses[0].id;
          this.getHouseSalesByTimTime();
        }
      })
    },
    /*提交查询*/
    getHouseSalesByTimTime(){
      let param ={houseId:this.allHousesId};
      console.log(this.dateValue)
      this.dateValue ? Object.assign(param,{time:this.dateValue}):'';
      apiDataFilter.request({
        apiPath:'house.getHouseSalesByTimTime',
        data:param,
        method:'post',
        successCallback:(res)=>{
          this.chartData = res.data;
          this.handleGetDay();
        }
      })
    },
    handleGetDay(){
     let d = new Date();
     let mSt = d.getMonth()+1;
     let year =d.getFullYear();
     let daysEachMonth = null
     let month =  this.dateValue ? this.dateValue.split('-')[1]:mSt;
     if (month[0] == 0){
       month = month[1]
     }
      if (month == 2) {
        (!(year % 400) || (!(year % 4) && (year % 100))) ? daysEachMonth = 29 : daysEachMonth = 28;
      }else {
        (month == 4 || month == 6 || month == 9 || month == 11) ? daysEachMonth = 30 : daysEachMonth = 31;
      }
      this.dateList = [];
      for (let i =0 ; i < daysEachMonth; i++){
        if (i < 9){
          let a = i+1;
          this.dateList.push('0'+a)
        }else {
          this.dateList.push((i+1).toString())
        }
      }
      this.handleDeal();
    },
    handleDeal(){
      this.seriesData=[];
      this.dateList.forEach((item,index)=>{
        this.seriesData.push(0)
      })
      this.chartData.forEach((itm, idx) => {
        let num = Number(itm.day)
        this.seriesData[num-1] = itm.num
      })
      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart);
      this.chart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          position: 'top',
          backgroundColor: '#4081D6',
          padding: 4,
          textStyle: {
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          name:'日',
          type: 'category',
          data: this.dateList,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          name:'销量',
          type: 'value'
        }],
        series: [{
          type: 'line', //设置列表为折线类型
          name: '销量',
          lineStyle:{
            normal:{
              color:'#4081D6', // 折线条颜色
            }

          },
          itemStyle:{
            normal:{
              color: "#4081D6", //图标颜色
            },
            emphasis: { //重点，强调时候的样式，即当鼠标悬停或点击上去的时候的拐点的样式
              borderColor: '#4081D6',
              borderWidth: 2,
              color: '#4081D6'
            }
          },
          connectNulls: true,
          data: this.seriesData
        }]
      })
    }
  },
  created(){
    this.getCount();
    this.getAllHouses();
  }
}
</script>

<style scoped lang='less'>
    @import "index.less";
</style>
